<template>
  <div>
    <Header :configs="configs"></Header>
    <div class="nav">
      <div class="nav-center">
        <dt class="nav-menu">
          <p class="menu-a">专业分类</p>
        </dt>
        <dd class="nav-list">
          <ul>
            <li v-for="(item, index) in navData" :key="index">
              <a :href="item.href" class="nav-list-a">{{ item.name }}</a>
            </li>
          </ul>
        </dd>
      </div>
    </div>
    <div class="banner">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in bannerData"
            :key="index"
          >
            <a
              :href="item.jump_url ? item.jump_url : 'javascript:void(0);'"
              :title="item.name"
            >
              <img
                :src="item.img_url"
                :alt="item.name"
                style="width: 100%; height: 100%"
              />
            </a>
          </div>
        </div>
      </div>
      <div class="menu-row">
        <ul>
          <li
            class="menu-list"
            v-for="(item, index) in kzflData"
            :key="index"
            v-show="index < 3"
          >
            <a
              :href="item.href ? item.href : 'javascript:void(0);'"
              class="list-title"
              >{{ item.name }}</a
            >
            <div class="list-sub-list">
              <dd v-for="(ite, ind) in item.children" :key="ind">
                <a
                  :href="ite.href ? ite.href : 'javascript:void(0);'"
                  :title="ite.lable_name"
                  class="sub-list-a"
                  >{{ ite.lable_name }}</a
                >
              </dd>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="nav-grid">
      <ul>
        <li v-for="(item, index) in kzNavData" :key="index">
          <a class="icon" :href="item.href" :title="item.lable_name">
            <img
              :src="`/imgs/icon${index + 1}.png`"
              :alt="item.lable_name"
              style="width: 100%; height: 100%"
            />
          </a>
          <p class="name">
            <a :href="item.href" :title="item.lable_name">{{ item.lable_name }}</a>
          </p>
        </li>
      </ul>
    </div>
    <div class="zhengjian">
      <div class="zhengjian-center">
        <!-- 考证 -->
        <div class="zhengjian-nav">
          <ul>
            <li v-for="(item, index) in kzlistTabData[0]" :key="index" :class="index < 1 ? 'first' : ''">
              <a :href="item.href">{{ item.lable_name }}</a>
            </li>
          </ul>
          <a :href="moreHref[0]||'/zyfl/'" class="zhengjian-more">更多考证 >></a>
        </div>
        <ul class="zhengjian-list">
          <li v-for="(item, index) in kzlistData[0]" :key="index">
            <div class="list-cover">
              <a href="" :title="item.title">
                <el-image
                  :src="item.picture"
                  :title="item.title"
                  :alt="item.title"
                  style="width: 100%; height: 100%"
                ></el-image>
                <p class="cover-name">{{ item.title }}</p>
              </a>
            </div>
            <div class="list-content">
              <p class="desc">
                <a href="" :title="item.describe">{{ item.describe }}</a>
              </p>
              <div class="notice">
                <dt>{{ item.lables ? item.lables[0].lable_name : '' }}</dt>
                <dd>
                  <button class="dz-btn" :class="item.on?'on':''" :disabled="item.on" @click="dianzanFn(item)">{{ item.like_num || 0 }}</button>
                </dd>
              </div>
            </div>
          </li>
        </ul>
        <!-- 培训 -->
        <div class="zhengjian-nav">
          <ul>
            <li v-for="(item, index) in kzlistTabData[1]" :key="index" :class="index < 1 ? 'first' : ''">
              <a :href="item.href">{{ item.lable_name }}</a>
            </li>
          </ul>
          <a :href="moreHref[1]||'/zyfl/'" class="zhengjian-more">更多培训 >></a>
        </div>
        <ul class="zhengjian-list">
          <li v-for="(item, index) in kzlistData[1]" :key="index">
            <div class="list-cover">
              <a href="" :title="item.title">
                <el-image
                  :src="item.picture"
                  :title="item.title"
                  :alt="item.title"
                  style="width: 100%; height: 100%"
                ></el-image>
                <p class="cover-name">{{ item.title }}</p>
              </a>
            </div>
            <div class="list-content">
              <p class="desc">
                <a href="" :title="item.describe">{{ item.describe }}</a>
              </p>
              <div class="notice">
                <dt>{{ item.lables ? item.lables[0].lable_name : '' }}</dt>
                <dd>
                  <button class="dz-btn" :class="item.on?'on':''" :disabled="item.on" @click="dianzanFn(item)">{{ item.like_num || 0 }}</button>
                </dd>
              </div>
            </div>
          </li>
        </ul>
        <!-- 复审 -->
        <div class="zhengjian-nav">
          <ul>
            <li v-for="(item, index) in kzlistTabData[2]" :key="index" :class="index < 1 ? 'first' : ''">
              <a :href="item.href">{{ item.lable_name }}</a>
            </li>
          </ul>
          <a :href="moreHref[2]||'/zyfl/'" class="zhengjian-more">更多复审 >></a>
        </div>
        <ul class="zhengjian-list">
          <li v-for="(item, index) in kzlistData[2]" :key="index">
            <div class="list-cover">
              <a href="" :title="item.title">
                <el-image
                  :src="item.picture"
                  :title="item.title"
                  :alt="item.title"
                  style="width: 100%; height: 100%"
                ></el-image>
                <p class="cover-name">{{ item.title }}</p>
              </a>
            </div>
            <div class="list-content">
              <p class="desc">
                <a href="" :title="item.describe">{{ item.describe }}</a>
              </p>
              <div class="notice">
                <dt>{{ item.lables ? item.lables[0].lable_name : '' }}</dt>
                <dd>
                  <button class="dz-btn" :class="item.on?'on':''" :disabled="item.on" @click="dianzanFn(item)">{{ item.like_num || 0 }}</button>
                </dd>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="zixun">
      <div class="zixun-center">
        <div class="zixun-box">
          <div class="zixun-list">
            <h3 class="title">
              考证行情    
              <a href="/kzzx/kzhq" class="more">更多...</a>
            </h3>
            <ul class="list">
              <li
                class="list-li"
                v-for="(item, index) in kzzxData[0]"
                :key="index"
              >
                <a
                  class="title"
                  :href="`/kzzxxq/${item.id}.html`"
                  :title="item.title"
                  >{{ item.title }}</a
                >
                <span class="date">{{ item.create_timeNow }}</span>
              </li>
            </ul>
          </div>
          <div class="zixun-list">
            <h3 class="title">
              学历提升   
              <a href="/kzzx/kzdt" class="more">更多...</a>
            </h3>
            <ul class="list">
              <li
                class="list-li"
                v-for="(item, index) in kzzxData[1]"
                :key="index"
              >
                <a
                  class="title"
                  :href="`/kzzxxq/${item.id}.html`"
                  :title="item.title"
                  >{{ item.title }}</a
                >
                <span class="date">{{ item.create_timeNow }}</span>
              </li>
            </ul>
          </div>
          <div class="zixun-list">
            <h3 class="title">
              考证动态  
              <a href="/kzzx/kzbk" class="more">更多...</a>
            </h3>
            <ul class="list">
              <li
                class="list-li"
                v-for="(item, index) in kzzxData[2]"
                :key="index"
              >
                <a
                  class="title"
                  :href="`/kzzxxq/${item.id}.html`"
                  :title="item.title"
                  >{{ item.title }}</a
                >
                <span class="date">{{ item.create_timeNow }}</span>
              </li>
            </ul>
          </div>
          <div class="zixun-list">
            <h3 class="title">
              招生简章
              <a href="/kzzx/kztj" class="more">更多...</a>
            </h3>
            <ul class="list">
              <li
                class="list-li"
                v-for="(item, index) in kzzxData[3]"
                :key="index"
              >
                <a
                  class="title"
                  :href="`/kzzxxq/${item.id}.html`"
                  :title="item.title"
                  >{{ item.title }}</a
                >
                <span class="date">{{ item.create_timeNow }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Footer-baoming :links="links" :configs="configs"></Footer-baoming>
    <Footer :configs="configs"></Footer>
    <Fixed-footer :configs="configs"></Fixed-footer>
    <Fixed-nav :configs="configs"></Fixed-nav>
    <Fixed-call :configs="configs"></Fixed-call>
  </div>
</template>

<script>
let tdk = {
  title: '特种工操作证-学历提升-职业技术学院-上海纺扬科技',
  keywords: '考特种工操作证,学历提升,职业技术学院,成人自考,专升本,职高,高校',
  description: '上海纺扬科技提供特种工操作证报考,培训,学历提升,成人自考,专升本,职高,职业技术学院,高校招生等业务,值得信赖',
}
import u from '@/plugins/comm'
export default {
  head() {
    return {
      title: tdk.title,
      meta: [
        { name: 'keywords', content: tdk.keywords },
        { name: 'description', content: tdk.description },
      ],
      link: [{ rel: 'stylesheet', href: '/css/swiper-bundle.min.css' }],
      script: [{ src: '/js/swiper-bundle.min.js' }],
    }
  },
  async asyncData({ params, store, links, navData, configs }) {
    let bannerData = [] // banner
    let kzflData = [] // banner 考证分类
    let kzlabelData = [] // banner 考证分类标签
    let kzlistTabData = [] // 考证导航 0考证，1培训，2复审
    let kzlistData = [] // 考证导航列表
    let kzNavData = [] // 手机端导航
    let moreHref = [] // 导航更多
    let kzzxData = [] // 资讯列表 1行情，2动态，3百科，4推荐

    // 获取轮播图
    let getBannerData = await u.http({
      url: store.state.banner,
      method: 'GET'
    })
    if (getBannerData.code == 200) {
      bannerData = getBannerData.data
      bannerData.forEach(item => {
        item.img_url = item.img_url
        // item.img_url = u.imgPrefixed + item.img_url
      })
    }
    // 获取考证分类
    let getKzflData = await u.http({
      url: store.state.lables,
      method: 'GET',
    })
    if (getKzflData.code == 200) {
      kzflData = getKzflData.data
      kzflData.forEach((item) => {
        item.href = `/zyfl/a${item.id}`
        item.children.forEach((ite) => {
          ite.href = `/zyfl/a${item.id}-b${ite.id}`
        })
        // 设置更多路径
        moreHref.push(`/zyfl/a${item.id}`)
      })
      // 添加推荐
      if (kzflData.length > 0) {
        for (let i = 0; i < 3; i++) {
          kzlistTabData[i] = []
          kzflData[i].children.forEach((item, index) => {
            if (index < 8) {
              item.href = `/zyfl/a${kzflData[i].id}${item.id ? '-b' + item.id : ''}`
              kzlistTabData[i].push(item)
            }
          })
          // 获取考证列表
          let getKzlbData = await u.http({
            url: store.state.certificateIndex,
            method: 'GET',
            params: {
              page: 1,
              page_size: 10,
              lable_cate_id: kzflData[i].id,
              lable_id: '',
              keywords: ''
            }
          })
          if (getKzlbData.code == 200) {
            kzlistData[i] = []
            getKzlbData.data.list.forEach(item => {
              item.picture = item.picture
              // item.picture = u.imgPrefixed + item.picture
              item.on = false
            })
            kzlistData[i] = getKzlbData.data.list
          }
          // 手机端导航
          kzlistTabData[i].forEach((item,index) => {
            if (i < 2 && index < 3) {
              kzNavData.push(item)
            }
            if (i > 1 && index < 2) {
              kzNavData.push(item)
            }
          })
        }
      }
    }
    // 获取考证资讯 1考证行情，2考证动态，3考证百科，4考证推荐
    for (let i = 0; i < 4; i++) {
      let getKzzxData = await u.http({
        url: store.state.articleIndex,
        method: 'GET',
        params: {
          page: 1,
          page_size: 10,
          article_cate_id: i + 1,
        },
      })
      if (getKzzxData.code == 200) {
        getKzzxData.data.list.forEach((item) => {
          item.create_timeNow = u.formatTime(item.create_time_str, 'Y-m-d')
        })
        kzzxData.push(getKzzxData.data.list)
      }
    }

    return {
      links,
      navData,
      bannerData,
      kzflData,
      kzlabelData,
      kzlistTabData,
      kzNavData,
      moreHref,
      kzlistData,
      kzzxData,
      configs
    }
  },
  data() {
    return {
      kaozhengData: [
        {
          name: '考证推荐',
          href: '',
        },
        {
          name: '电工考证',
          href: '',
        },
        {
          name: '焊工考证',
          href: '',
        },
        {
          name: '叉车考证',
          href: '',
        },
        {
          name: '高空考证',
          href: '',
        },
        {
          name: '高压电工考证',
          href: '',
        },
        {
          name: '制冷操作证',
          href: '',
        },
        {
          name: '挖掘机证',
          href: '',
        },
        {
          name: '起重机证',
          href: '',
        },
        {
          name: '安全员证',
          href: '',
        },
      ],
    }
  },
  mounted() {
    setTimeout(() => {
      new Swiper('.swiper', {
        autoplay: true,
        loop: true,
      })
    }, 300)
  },
  methods: {
    // 点赞
    dianzanFn(e) {
      this.kzlistData.forEach(item => {
        if (item.id == e.id) {
          item.like_num ++
          item.on = true
          return false
        }
      })
      u.http({
        agent: true,
        url: this.$store.state.like,
        headers: {
          'content-type': 'application/json'
        },
        data: {
          id: e.id
        }
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error'
        })
      })
    }
  }
}
</script>
